<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
		<link rel="stylesheet" type="text/css" href="../../statics/bowersrc/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			.header {
				position: fixed;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
				z-index: 2;
				top: 0;
			}
			
			.header #backIcon {
				width: 46.5px;
				display: flex;
				align-items: center;
				width: 50px;
			}
			
			.header #backIcon span {
				font-size: 14px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom {
				width: 50px;
				text-align: right;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: white;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: white;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: white;
			}
			
			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: white;
			}
			
			.main .banner {
				width: 100%;
				height: 190px;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
			}
			
			.swiper-container img {
				width: 100%;
				height: 100%;
			}
			
			.main {}
			
			.footer {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 45px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.footer .pay {
				height: 100%;
				flex: 3;
				background: #65bdd4;
				color: white;
				font-size: 12px;
				text-align: center;
				line-height: 45px;
			}
			
			.footer .left {
				height: 100%;
				flex: 7;
				background: #585858;
				color: white;
				font-size: 13px;
				text-align: center;
				position: relative;
			}
			
			.footer .left .car {
				position: absolute;
				display: inline-block;
				left: 15px;
				bottom: 15px;
				text-align: left;
			}
			
			.footer .left .total {
				line-height: 45px;
				position: absolute;
				left: 75px;
			}
			
			.footer .left .car img {
				width: 45px;
			}
			
			.footer .left .car span {
				width: 13.5px;
				height: 13.5px;
				background: red;
				color: white;
				font-size: 12px;
				line-height: 13.5px;
				text-align: center;
				position: absolute;
				top: 3px;
				border-radius: 50%;
				right: 0;
			}
			
			.main .title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 19px 17.5px;
			}
			
			.main .title .price {
				color: #d0a408;
				font-size: 12px;
				font-weight: bolder;
			}
			
			.main .title .name h2 {
				font-size: 14px;
				color: #303030;
				font-weight: bolder;
			}
			
			.main .title .name h3 {
				font-size: 12px;
				color: #8A8A8A;
			}
			
			.main .detail {
				border-top: 10px solid #F0F0F0;
				padding: 0 16px 80px;
				color: #8A8A8A;
			}
			
			.main .detail img {
				width: 100%;
			}
			
			.main .detail .fExplain {}
			
			.main .detail .caption {
				font-size: 13px;
				color: #303030;
				display: flex;
				align-items: center;
				padding-top: 16px;
			}
			
			.main .detail .caption img {
				height: 15px;
				width: auto;
				padding-left: 6px;
			}
			
			.main .detail .line {
				position: relative;
				top: -10px;
			}
			
			.moreImgs {
				width: 100%;
			}
			/*修改蒙板*/
			
			.markT {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.4);
				position: fixed;
				left: 0;
				top: 0;
				z-index: 10;
				display: none;
				transition: all 0.5s;
			}
			
			.markT .markBox {
				width: 80%;
				height: 150px;
				background: white;
				border-radius: 6px;
				position: absolute;
				left: 10%;
				top: 50%;
				margin-top: -75px;
				overflow: hidden;
			}
			
			.markBox p {
				text-align: center;
				margin: 20px 0;
				font-size: 16px;
				color: black;
			}
			
			.markBox p:last-of-type {
				width: 100%;
				margin: 0;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			
			.markBox p:last-of-type span:first-child,
			.markBox p:last-of-type span:last-child {
				display: inline-block;
				height: 35px;
				line-height: 35px;
				font-size: 14px;
				width: 50%;
				text-align: center;
			}
			
			.markBox p:last-of-type span:first-child {
				background: whitesmoke;
			}
			
			.markBox p:last-of-type span:last-child {
				background: black;
				color: white;
			}
			
			.markT .markBox p:first-child {
				margin-top: 40px;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div><span>返回</span>
			</div>
			<div class="content">商品详情</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div style="height: 50px;"></div>
		<div class="main">
			<div class="banner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<!--<div class="swiper-slide"><img src="http://odys8pbcn.bkt.clouddn.com/20170713-596701b2dfea0.jpg" /></div>
						<div class="swiper-slide"><img src="../../statics/images/index1/banner2.png" /></div>
						<div class="swiper-slide"><img src="../../statics/images/index1/banner3.jpg" /></div>-->
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="title">
				<div class="name">
					<h2 class="flowerName">云南直供雪山玫瑰</h2>
					<h3 class="introduce">守望幸福、浪漫、致远</h3>
				</div>
				<div class="price money">
					19.9/扎
				</div>
			</div>
			<div class="detail">
				<div class="fExplain">
					<div class="caption"><span>商品详情</span><img src="../../statics/images/flowerDetail/Details@2x.png" /></div>
					<div class="line"><img src="../../statics/images/flowerDetail/line.png" /></div>
					<ul>
						<li>品种：<span class="cateName">玫瑰花</span> </li>
						<li>原产：<span class="origin">云南</span> </li>
						<li>规格：<span class="flowerHead">花头10cm+</span> <span class="flowerBranch">枝条35cm+</span> </li>

					</ul>

				</div>
				<div class="sExplain">
					<div class="caption"><span>商品详情</span><img src="../../statics/images/flowerDetail/Delivery@2x.png" /></div>
					<div class="line"><img src="../../statics/images/flowerDetail/line.png" /></div>
					<p>付款后24小时内发货，某些特殊商品付款后48小时内发货，运输时间无法预估，送达时间以物流实际配送为准，订购后请随时登录查询物流状态。</p>

				</div>
				<div class="tExplain">
					<div class="caption"><span>商品详情</span><img src="../../statics/images/flowerDetail/Return-&-Exchange@2x.png" /></div>
					<div class="line"><img src="../../statics/images/flowerDetail/line.png" /></div>
					<p>如有质量问题，请在签收后7日内联系客服</p>
				</div>

			</div>
		</div>
		<footer class="footer">
			<div class="left">
				<div class="car">
					<img src="../../statics/images/cityWide/sellerShop/car.png" />
					<span class="number">0</span>
				</div>
				<span class="total">￥0</span>
			</div>
			<div class="pay">
				加入购物车
			</div>

		</footer>
		<div class="markT">
			<div class="markBox">
				<p>你现在还没登陆，现在去登陆么？</p>
				<p><span id="cancleT">取消</span><span id="sureT">确定</span></p>
			</div>
		</div>

	</body>

	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	</script>

	<script type="text/javascript">
		$(function() {
			new FastClick(document.body);
		})
	</script>
	<script type="text/javascript">
		var mySwiper = new Swiper('.swiper-container', {
			//			direction: 'vertical',c
			loop: true,
			// 如果需要分页器
			pagination: '.swiper-pagination',
			autoplay: 3000,
			autoplayDisableOnInteraction: false,
			observer: true, //修改swiper自己或子元素时，自动初始化swiper
			observeParents: true //修改swiper的父元素时，自动初始化swiper
		});
		var token = selectByKey("like_token");
		var seller;
		var flowerId = window.location.search.split("&")[0].split('=')[1];

		$(".custom").on("click", function() {
			window.location.href = "../../views/service.html";
		});
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		});
		$(".navList li").on("click", function() {
			$(this).addClass("color");
			$(this).find("div").addClass("underline");
			$(".navList li").not($(this)[0]).removeClass("color");
			$(".navList li").not($(this)[0]).find("div").removeClass("underline");
		});

		$(function() {

			$.get( pathName +'/api/v2/flowercity/flower/show', {
				flowerId: flowerId
			}, function(res) {
				var res = JSON.parse(res);
				console.log(res)
				if(res.code == 0) {
					var data = res.data;
					seller = res.data.sellerId;
					$(".flowerName").html(data.flowerName);
					$(".introduce").html(data.introduce);
					$(".money").html(data.money + "/扎");

					$(".origin").html(data.origin);
					$(".cateName").html(data.cateName);
					$(".flowerHead").html("花头" + data.flowerHead + "cm+")
					$(".flowerBranch").html("枝条" + data.flowerBranch + "cm+")
					for(var Timgs in data.turnImgs) {
						console.log(data.turnImgs[Timgs]);
						$(".swiper-wrapper").append('<div class="swiper-slide"><img src="' + data.turnImgs[Timgs] + '" /></div>')
					}
					for(var Mimgs in data.moreImgs) {
						$(".detail").append('<img src="' + data.moreImgs[Mimgs] + '"/>');
					}

				} else {
					alert("数据访问失败!");
				}
			});
			addCar();
			$.ajax({
				url: pathName + "/api/v1/member/cart",
				type: "get",
				headers: {
					"Accept": "application/json",
					"Authorization": "Bearer " + token
				},
				success: function(value) {
					console.log(value);
					if(value.count > 0) {
						$(".number").text(value.count);
						$(".total").text("￥"+value.total_cost);
					}

				},
				error: function() {
					if(!token) {
						console.log('没有登录，请先登录')
					}
				}
			});

		})
		//点击购物车
		$(".car").on("click", function() {
			if(token) {
				window.location.href = "../../views/trolley.html";
			} else {
				$(".markT").show();
			}
		})

		function addCar() {
			$(".pay").on("click", function() {
				console.log(token)
				if(token) {
					$.ajax({
						url: pathName + "/api/v1/member/cart",
						type: "POST",
						dataType: "json",
						headers: {
							"Accept": "application/json",
							"Authorization": "Bearer " + token
						},
						data: {
							"goodId": flowerId,
							"shop_total": 1,
							"shop_type": 0,
							"region_id": "",
							"module": "2",
							"seller": seller
						},
						success: function(value) {
							console.log(value);
							$(".number").text(value.cart_count);
							$(".total").text("￥"+value.total_price);
						},
						error: function(res) {
							//							var response = JSON.parse(res.responseText);
							//							if(response.code == 20041) {
							////								infoMsg("特价花不能与普通花一起购买");
							//							}
						}
					})
				} else {
					$(".markT").show();

				}

			})
		}
		//蒙板的确定和取消

		$("#cancleT").on("click", function() {
			$(".markT").hide();
		})
		$("#sureT").on("click", function() {
			window.location.href = "../cityPartner/chooseLogin.html";
		})
	</script>

</html>